<template>
  <div id="wrap">
    <h1>案例：购物车</h1>
    <div>
      <button type="button" @click="addShopItem">模拟添加购物车</button>
      <button type="button" @click="editShopItem">模拟修改某商品的价格</button>
    </div>
    <StuDemo51Son ref="shopCarRef" :shops="shops" v-slot="{ item }">
      <StuDemo51SonSon :item="item"></StuDemo51SonSon>
    </StuDemo51Son>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo51',
};
</script>

<script lang="ts" setup>
import { ref, useTemplateRef } from 'vue';
import { type IshopInfo } from '@/types/shop';
//导入子组件
import StuDemo51Son from './components/StuDemo51Son.vue';
import StuDemo51SonSon from './components/StuDemo51SonSon.vue';

//访问子组件的方法
const shopCarRef = useTemplateRef('shopCarRef');
//模拟数据
const shops = ref<IshopInfo[]>([
  {
    id: '1',
    shopName: '无人机',
    count: 1,
    price: 100,
    shopPic:
      'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0117%2F621578d7j00s7du7z000md200mx00egg00id00bk.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
    stock: 10,
  },
  {
    id: '2',
    shopName: '黑中华',
    count: 1,
    price: 50,
    shopPic:
      'https://img2.baidu.com/it/u=709272474,3238933160&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
    stock: 10,
  },
  {
    id: '3',
    shopName: '马自达',
    count: 1,
    price: 20000,
    shopPic:
      'https://img1.baa.bitautotech.com/dzusergroupfiles/2024/07/29/80ced18ef6044a46b8f48e4b4721f902.jpg',
    stock: 10,
  },
  {
    id: '4',
    shopName: '茅台',
    count: 1,
    price: 2000,
    shopPic: 'https://q3.itc.cn/images01/20240612/68bf337790974ba9870816d0f6f55beb.jpeg',
    stock: 10,
  },
]);

//模拟添加购物车的物品
const addShopItem = () => {
  shopCarRef.value?.addShop({
    id: '4',
    shopName: '茅台',
    count: 1,
    price: 2000,
    shopPic: 'https://q3.itc.cn/images01/20240612/68bf337790974ba9870816d0f6f55beb.jpeg',
    stock: 10,
  });
};
//修改商品价格
const editShopItem = () => {
  shopCarRef.value?.editShop(0, 'price', 5000);
};
</script>

<style lang="scss"></style>
